<template>
  <div class="  height100 domainMainContent" style="position:relative;">
    <el-main class="el-mainContent  height100 overflowYHidden">
      <header_item  :headerArr="headerArr" />
    <div class="interface_wrap">
      <div class="header_wrap">
          <i class="iconfont icon-a-icon_OpenAPI_off" aria-hidden="true"></i>
          <span class="marginL20 d-inlineBlock">Open API</span>
      </div>
      <p>{{$t('open_api_header_title')}}</p>
      <div class="content_wrap">
        <p class="bold">{{$t('open_api_middle_header')}}</p>
        <p>{{$t('open_api_middle_content')}}</p>
        <p class="bold marginT24">Open API Secret Key</p>
        <p class="text_desc">{{$t('open_api_middle_placeholder')}}</p>
        <div class="serect_wrap">
          <input type="text" v-model="secret" ref="secret" placeholder="xxx-xxxx-xxxx">
          <el-button size="small" plain @click="copyText">{{$t('open_api_btn_copy')}}</el-button>
        </div>
        <el-divider></el-divider>
        <p class="text_desc">{{$t('open_api_footer_placeholder')}}</p>
        <el-button type="danger" size="small" @click="resetSecret">{{$t('open_api_footer_button')}}</el-button>
      </div>
    </div>
  </el-main>
  </div>
</template>

<script>
export default {
  name:'APIInterface',
  components:{
  },
  data () {
    return {
      secret: '',
      headerArr:{}
    };
  },
  methods:{
    /**
     * 获取企业域信息
     */
    getDomainData(){
      this.$api.getDomain(this.$route.query.domainid, {
        onSucess: (resp) => {
          this.secret = resp.data.data.secret;
        },
      });
    },
    copyText(){
      // 创建一个 Input标签
      const cInput = document.createElement('input')
      cInput.value = this.secret
      document.body.appendChild(cInput)
      cInput.select() // 选取文本域内容;
      document.execCommand('Copy')
      this.$message.success(this.$t('copy_success'))// antd框架封装的通知,如使用别的UI框架，换掉这句
      /// 复制成功后再将构造的标签 移除
      cInput.remove()
    },
    resetSecret(){
      this.$api.resetSecret(this.$route.query.domainid, {
        onSucess: (resp) => {
          this.secret = resp.data.data;
        },
      });
    }
  },
  created(){
    this.getDomainData()
     //关于标题的处理
     this.headerArr={iconfont:'icon-a-icon_OpenAPI_off',content:'Open API'}
  }
}

</script>
<style lang='scss' scoped>
</style>